<template>
  <div id="search">
    <div id="input-search">
      <input type="text" placeholder="搜索音乐/视频/歌单/歌手/用户"
             v-model.lazy="inputText" @focus="showCancel">
      <img src="../assets/find.png">
      <span v-if="isShowCancel" @click="notShowCancel">取消</span>
    </div>
    <div id="hot-search" v-if="!isShowCancel">
      <div>
        <p class="hot-search-p">热门搜索</p>
      </div>
      <div id="hot-key-world">
        <ul>
          <li v-for="(hotSearchKeyWorld,index) in hotSearchKeyWorlds" class="key-world" :key="index"
              @click="clickHotWorld(hotSearchKeyWorld)">
            {{hotSearchKeyWorld}}
          </li>
        </ul>
      </div>
    </div>
    <div v-if="isShowCancel&&inputText.length>0" id="search-result">
      <p class="hot-search-p color_green">搜索"{{inputText}}"</p>
      <div id="show-result">
        <ul>
          <li v-for="(showData,index) in searchData" :key="index" @click="showSongDetail(showData.id)">
            <img src="../assets/find.png">
            {{showData.songName}}&nbsp;&nbsp;{{showData.artistName.substring(0,10)}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {searchSong} from '../api/song'

  export default {
    name: 'InputSearch.vue',
    data() {
      return {
        isShowCancel: false,
        inputText: '',
        hotSearchKeyWorlds: ['我的朋友', '狮子王', '那个男人', '不想睡',
          '扫毒2', '逆流', 'bad guy', 'follow me', '赤伶', '月亮警察', 'sweet but psycho'],
        searchData: []
      }
    },
    methods: {
      clickHotWorld: function (hotSearchKeyWorld) {
        this.inputText = hotSearchKeyWorld
        this.showCancel()
      },
      showCancel: function () {
        this.isShowCancel = true
      },
      notShowCancel: function () {
        this.isShowCancel = false
        this.inputText = ''
      },
      showSongDetail:function (id) {
        // console.log(id)
        this.$router.push(`/song/${id}`)
      }
    },
    watch: {
      inputText: function () {
        // console.log(this.$router)
        if (this.inputText.length !== 0) {
          searchSong({'keyWord': this.inputText}).then((res) => {
            if (res.data.code === 0) {
              console.log('查无数据')
            } else {
              this.searchData = res.data.data.list
              this.searchData.splice(10,100)
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
  #input-search {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    /*position: relative;*/
  }

  #input-search input {
    flex: 6;
    height: 28px;
    background: white;
    outline: none;
    border-radius: 14px;
    border: none;
    padding-left: 20px;
    margin: 5px;
  }

  #input-search span {
    flex: 1;
    font-size: 10px;
  }

  #input-search img {
    height: 15px;
    width: 15px;
    position: absolute;
    left: 10px;
    border-radius: 10px;
  }

  #hot-search {
    position: relative;
  }

  .hot-search-p {
    position: absolute;
    top: 40px;
    font-weight: bold;
    /*float: left;*/
    margin-left: 10px;
  }

  #hot-key-world {
    position: absolute;
    top: 70px;
  }

  #hot-key-world ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  #hot-key-world ul li:first-child {
    color: lawngreen;
  }

  .key-world {
    margin: 5px 10px;
    background: white;
    border-radius: 10px;
    font-size: 12px;
    padding: 3px 8px;
  }

  #search-result {
    position: absolute;
    /*top: 50px;*/
    width: 100%;
  }

  .color_green {
    color: lawngreen;
  }

  #show-result {
    position: absolute;
    top: 60px;
  }

  #show-result ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    /*float: left;*/
  }

  #show-result ul li {
    font-size: 13px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    /*display: block;*/
    /*flex: 1;*/
    /*float: left;*/
    /*width: 100%;*/
  }

  #show-result ul li img {
    margin-left: 5px;
    height: 15px;
    width: 15px;
    opacity: 0.8;
    margin-right: 10px;
  }
</style>
